<template>
  <div class="index">
    <div id="flow-image">
      <el-tooltip
        class="item"
        effect="dark"
        content="编辑图形"
        placement="right"
      >
        <el-button
          style="position: absolute; top: 2px; right: 2px; z-index: 9999"
          @click="$router.push('/flow-x6')"
          ><i class="el-icon-edit-outline"></i
        ></el-button>
      </el-tooltip>
      <el-button
        style="position: absolute; top: 2px; right: 60px; z-index: 9999"
        @click="editFlowData"
        >Edit Data</el-button
      >
      <div id="flow-container" style="background: none"></div>
    </div>
  </div>
</template>
<script>
import FlowGraph from "./flow-x6/graph";
import { $, getContainerSize } from "../utils";
export default {
  mounted() {
    this.getFlowJson();
  },
  destroyed() {
    const { graph } = FlowGraph;
    // 销毁画布，资源回收
    if (graph) graph.dispose();
    // 移除监听
    window.removeEventListener("resize", this.resizeFn);
  },
  methods: {
    // 去后台拿json
    getFlowJson() {
      setTimeout(() => {
        const graphJson = JSON.parse(window.localStorage.getItem("graphJson"));
        if (graphJson) {
          this.initFlowImage(graphJson);
        } else {
          this.$router.push("/flow-x6");
        }
      }, 300);
    },
    // 根据json渲染
    initFlowImage(graphJson) {
      // 初始化画板
      const graph = FlowGraph.init(
        $("#flow-container"),
        $("#flow-container").getBoundingClientRect().width,
        $("#flow-container").getBoundingClientRect().height,
        false
      );
      // 渲染操作
      graph.fromJSON(graphJson);
      // 建立嵌套关系
      graph.getNodes().forEach((node) => {
        const parentId = node.getParentId?.();
        if (parentId) {
          const parent = graph.getCellById(parentId);
          if (parent?.embed) {
            parent.embed(node);
          }
        }
      });

      // 默认展开 groupNode
      graph.getNodes().forEach((node) => {
        console.log("node", node);
        if (node.shape === "groupNode") {
          node.toggleCollapse?.(false); // 展开
          const cells = node.getDescendants();
          cells.forEach((n) => n.show()); // 显示所有子节点
        }
      });
      graph.on("node:collapse", ({ node, e }) => {
        e.stopPropagation();
        node.toggleCollapse();
        const collapsed = node.isCollapsed?.();
        const cells = node.getDescendants();

        cells.forEach((n) => {
          if (collapsed) {
            n.hide();
          } else {
            n.show();
          }
        });

        // 🔁 添加图标切换逻辑
        node.attr(
          "buttonSign/d",
          collapsed ? "M 2 5 8 5 M 5 2 5 8" : "M 2 5 8 5"
        );
      });

      // 监听数据改变事件
      // graph.getNodes().forEach(node => {
      //   if(node.getData()) {
      //     node.on("change:data", ({ cell, current }) => {
      //       // current 就是我们绑定的 业务属性data
      //       if(current.status == 0) {
      //         cell.attr('body/fill', 'red')
      //         cell.attr('text/fill', '#fff')
      //         cell.attr('text/text', '100℃')
      //       } else {
      //         cell.attr('body/fill', 'green')
      //         cell.attr('text/fill', '#080808')
      //         cell.attr('text/text', '150℃')
      //       }
      //     })
      //   }
      // })
      window.addEventListener("resize", this.resizeFn);
    },
    // 改变状态
    editFlowData() {
      const { graph } = FlowGraph;
      graph.getNodes().forEach((node) => {
        if (node.getData()) {
          let curStatus = node.getData().status;
          node.setData({
            status: curStatus == 0 ? 1 : 0,
          });
        }
      });
    },
    resizeFn() {
      setTimeout(() => {
        const { width, height } = getContainerSize($("#flow-image"));
        this.graph.resize(width, height);
      }, 100);
    },
  },
};
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url("@/assets/bg.png") no-repeat center center;
  background-size: cover;
  z-index: 99;
}
#flow-image {
  width: 100%;
  height: 100%;
  position: relative;
}
#flow-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
